<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./base.css">
    <style>

        .boxb {
            position: relative;
            left: 0;
            right: 0;
            margin: 100px auto;
            display: flex;
            justify-content: center;
        }

        p {
            font-size: 30px;
        }

        img {
            width: 19px;
        }

    </style>

</head>
<body>
<div class="boxb">
    <p>距离过年还有
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/0.png">
        天
        <img src="images/0.png">
        <img src="images/0.png">
        小时
        <img src="images/0.png">
        <img src="images/0.png">
        分
        <img src="images/0.png">
        <img src="images/0.png">
        秒
    </p>
</div>


<script>
    let aImg = document.querySelectorAll('img')
    yearsTimeok();
    setInterval(yearsTimeok,1000);
    function yearsTimeok() {
        let nowTime = new Date()
        let yearsTime = new Date(2025, 0, 29)
        let day = toThree(Math.floor((yearsTime - nowTime) / 1000 / 60 / 60 / 24))
        let hour = toTwo(Math.floor((yearsTime - nowTime) / 1000 / 60 / 60 % 24))
        let minute = toTwo(Math.floor((yearsTime - nowTime) / 1000 / 60 % 60))
        let second = toTwo(Math.floor((yearsTime - nowTime) / 1000 % 60))
        let str = day + '' + hour + minute + second
        for (let i = 0; i < 9; i++) {
            aImg[i].src = `images/${str[i]}.png`
        }
    }


    function toTwo(num) {
        if (num < 10) {
            return "0" + num
        }
        return num
    }

    function toThree(num) {
        if (num < 10) {
            return "00" + num
        } else if (num < 100) {
            return "0" + num
        }
        return "" + num
    }

</script>


</body>
</html>